import * as React from 'react';
import * as ReactDOM from 'react-dom';
class Dialog extends React.Component{
  state = {show: false};
  componentDidMount() {
    document.addEventListener("click",  () => {
      this.setState({show: false});
    });
  }
  handleButtonClick = (event) => {
    // event是合成时间对象，nativeEvent是它对应的原生时间对象
    // stopPropagation可以阻止向上冒泡，但是不能阻止本元素剩下的监听函数还会执行
    // event.nativeEvent.stopPropagation();
    // stopImmediatePropagation可以阻止向上冒泡，而且本元素剩下的监听函数不会执行
    event.nativeEvent.stopImmediatePropagation();
    this.setState({show: true});
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>显示</button>
        {this.state.show && (
         <div onClick={(event) => event.stopPropagation()}>
            Modal
          </div>
        )}
      </div>
    );
  }
}
ReactDOM.render(<Dialog />, document.getElementById('root'));